<template>
  <div>
    <form-box headText="半成品">
      <el-button
        size="small"
        slot="btn" @click.native="showAddNode">增加</el-button>
      <el-collapse v-model="colVal" @change="colChange" accordion>
        <el-collapse-item v-for="(item,index) in bomNodeList" :key="index" :title="item.remark" :name="index">
          <h1>{{item.remark}}</h1>
        </el-collapse-item>
      </el-collapse>
    </form-box>

    <el-dialog title="添加节点" :visible.sync="isShowAddNode" size="large" top="10%">
      <el-form class="small-space" :model="reqBomNode" label-position="right" label-width="90px" :inline="true">

        <el-form-item label="类型" label-width="100px">
          <el-select v-model="reqBomNode.node_info.mat_info.mat_type" clearable placeholder="类型">
            <el-option
              v-for="item in options_mat_type"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="名称" label-width="100px">
          <el-select v-model="reqBomNode.node_info.mat_info.mat_name" clearable placeholder="名称">
            <el-option
              v-for="item in options_mat_name"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="形状" label-width="100px">
          <el-select v-model="reqBomNode.node_info.mat_info.shape" clearable placeholder="形状">
            <el-option
              v-for="item in options_shape"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否采购下层物料" label-width="130px">
          <el-switch
            v-model="reqBomNode.node_info.is_purchase"
            on-color="#13ce66"
            off-color="#ff4949">
          </el-switch>
        </el-form-item>

        <br/>

        <el-form-item label="长(L)" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.length"></el-input>
        </el-form-item>

        <el-form-item v-show="reqBomNode.node_info.mat_info.shape == '1'" label="宽(W)" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.width"></el-input>
        </el-form-item>

        <el-form-item label="高(H)" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.height"></el-input>
        </el-form-item>

        <el-form-item label="直径(Φ)" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.count"></el-input>
        </el-form-item>

        <el-form-item label="材质" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.rawnature"></el-input>
        </el-form-item>

        <el-form-item label="重量" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.weight"></el-input>
        </el-form-item>

        <el-form-item label="附件" label-width="100px">
          <el-input v-model="reqBomNode.node_info.mat_info.pic_path" placeholder="这里要做单独上传"></el-input>
        </el-form-item>

        <el-form-item label="数量" label-width="100px">
          <el-input v-model="reqBomNode.node_info.total_qty"></el-input>
        </el-form-item>

        <el-form-item label="备注" label-width="100px">
          <el-input v-model="reqBomNode.node_info.remark"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddNode = false">取 消</el-button>
        <el-button type="primary" @click.native="confirmAddNode">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import formBox from '../../../components/formBox.vue'
  import {
    bomNodeUpdate,
    bomNodeList,
    bomNodeInfo
  } from '@/api/bom'
  export default {
    name: 'sfProducts',
    components:{
      formBox
    },
    data() {
      return {
        isShowAddNode:false,
        colVal:'',
        reqBomNode:{
          client_type:1,
          node_info:{
            is_purchase:null,
            node_id:null,
            remark:null,
            total_qty:null,
            mat_info:{
              height:null,
              length:null,
              mat_name:null,
              mat_type:null,
              pic_path:null,
              plan_price:null,
              rawnature:null,
              shape:'1',
              spec:null,
              weight:null,
              width:null,
            },
          }
        },
        bomNodeList:[],
        options_shape: [
          {
            value: '1',
            label: '立方体'
          },
          {
            value: '2',
            label: '圆柱体'
          }
        ],
        options_mat_name: [
          {
            value: '1',
            label: '外购模胚'
          },
          {
            value: '2',
            label: 'A板'
          },
          {
            value: '3',
            label: 'B板'
          },
          {
            value: '4',
            label: 'C板'
          }
        ],
        options_mat_type: [
          {
            value: '1',
            label: '模胚'
          },
          {
            value: '2',
            label: '前模'
          },
          {
            value: '3',
            label: '后模'
          },
          {
            value: '4',
            label: '滑块'
          },
          {
            value: '5',
            label: '顶出'
          },
          {
            value: '6',
            label: '其它'
          }
        ],
        reqNodeList:{
          client_type:1,
          project_mould_no:null,
          mat_type:null,
          path:null,
        }
      }
    },
    mounted() {
      let project_mould_no = this.$route.query.project_mould_no
      if(project_mould_no){
        bomNodeList(this.reqNodeList)
          .then(res => {
            this.bomNodeList = res.bom_node_list
          })
          .catch(err => {
            console.log(err)
            this.$message.error('获取节点列表失败!')
          })
      }
    },
    methods: {
      showAddNode(){  //显示增加节点弹窗
        let reset = {
          is_purchase:null,
          node_id:null,
          remark:null,
          total_qty:null,
          mat_info:{
            height:null,
            length:null,
            mat_name:null,
            mat_type:null,
            pic_path:null,
            plan_price:null,
            rawnature:null,
            shape:'1',
            spec:null,
            weight:null,
            width:null,
          }
        }
        this.reqBomNode.node_info = reset
        this.isShowAddNode = true
      },
      confirmAddNode(){ //确认增加节点
        bomNodeUpdate(this.reqBomNode)
          .then(res => {
            this.bomNodeList.push(this.reqBomNode.node_info)
            this.$message({
              type:'success',
              message:'添加成功!'
            })
            this.isShowAddNode = false
          })
          .catch(err => {
            console.log(err)
            this.$message.error('添加失败!')
          })
      },
      colChange(val){ //折叠面板是否展开的change事件方法
        bomNodeInfo()
          .then(res => {

          })
          .catch(err => {
            console.log(err)
            this.$message.error('获取详细信息失败!')
          })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
